<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <title>吉象出海 - 泰国专业房地产服务平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #EAA82A;  /* 大象黄 - 品牌主色 */
            --secondary: #2E8B57; /* 森林绿 - 辅助色 */
            --dark: #1a2e3b;     /* 深蓝色 */
            --danger: #D0021B;   /* 警示红 */
            --text: #374151;    /* 主要文字色 */
            --light-bg: #F8F9FA; /* 浅灰背景 */
            --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
            --ad-green: #2E8B57; /* 广告绿色 */
            --ad-yellow: #FEEFC3; /* 广告黄色 */
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        /* 全局链接样式 */
        a {
            color: inherit;
            text-decoration: none;
        }
        
        body {
            background-color: #fff;
            color: var(--text);
            max-width: 428px;
            margin: 0 auto;
            padding-bottom: 0;
            position: relative;
        }
        
        /* 顶部品牌区 */
        .brand-header {
            text-align: center;
            padding: 12px 0;
            background: linear-gradient(to bottom, #ffffff, #F8F9FA);
            position: relative;
            border-radius: 0;
            margin-bottom: 0;
            color: var(--primary);
        }
        
        .brand-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 4px;
            position: relative;
            display: inline-block;
        }
        
        .brand-subtitle {
            font-size: 12px;
            color: var(--text);
            letter-spacing: 2px;
            opacity: 0.8;
            margin-top: 0;
            padding: 0;
            line-height: normal;
        }
        
        /* 搜索区域 */
        .search-section {
            padding: 0 15px;
            margin-bottom: 15px;
        }
        
        .search-box {
            display: flex;
            background: white;
            border-radius: 30px;
            overflow: hidden;
            height: 50px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            border: 1px solid #e2e8f0;
        }
        
        .select-container {
            position: relative;
            display: flex;
            align-items: center;
            background: var(--primary);
            padding: 0 15px;
            min-width: 110px;
            cursor: pointer;
            flex-shrink: 0;
        }
        
        .select-container select {
            border: none;
            background: transparent;
            color: white;
            font-weight: 600;
            font-size: 15px;
            appearance: none;
            width: 100%;
            height: 100%;
            cursor: pointer;
            padding-right: 25px;
        }
        
        .select-arrow {
            position: absolute;
            right: 12px;
            color: white;
            font-size: 14px;
            pointer-events: none;
        }
        
        .search-box input {
            flex: 1;
            border: none;
            background: white;
            padding: 0 20px;
            font-size: 15px;
            outline: none;
        }
        
        .search-box input::placeholder {
            color: #9CA3AF;
        }
        
        .search-button {
            background: var(--secondary);
            color: white;
            border: none;
            padding: 0 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            font-size: 16px;
            gap: 6px;
        }
        
        .search-button:hover {
            background: #257347;
        }
        
        .search-button span {
            display: none;
        }
        
        /* 服务区域 */
        .services-section {
            padding: 0 15px;
            margin-bottom: 15px;
        }
        
        .services-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: 700;
            position: relative;
            padding-left: 12px;
        }
        
        .services-title::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 20px;
            background: var(--primary);
            border-radius: 2px;
        }
        
        .view-all {
            color: var(--primary);
            font-size: 14px;
            font-weight: 500;
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        
        .service-item {
            text-align: center;
            background: white;
            border-radius: 10px;
            padding: 12px 5px;
            box-shadow: var(--card-shadow);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .service-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        }
        
        .service-icon {
            width: 42px;
            height: 42px;
            margin: 0 auto 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            transition: all 0.3s ease;
        }
        
        .service-name {
            font-size: 13px;
            color: var(--text);
            font-weight: 500;
        }
        
        .more-services {
            grid-column: span 4;
            background: var(--primary);
            color: white !important;
            font-weight: 600;
            padding: 14px;
            font-size: 15px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 轮播广告位 */
        .ad-section {
            margin: 0 15px 20px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            height: 110px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .ad-slides {
            display: flex;
            transition: transform 0.5s ease;
            height: 100%;
        }
        
        .ad-slide {
            min-width: 100%;
            height: 100%;
            padding: 20px;
            background: var(--ad-green);
            color: white;
            position: relative;
        }
        
        .ad-slide:nth-child(2) {
            background: linear-gradient(135deg, #2E8B57, #3DA76A);
        }
        
        .ad-slide:nth-child(3) {
            background: linear-gradient(135deg, #2E8B57, #4BC279);
        }
        
        .ad-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--danger);
            color: white;
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: bold;
        }
        
        .ad-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .ad-content {
            font-size: 14px;
            margin-bottom: 10px;
            max-width: 70%;
        }
        
        .ad-button {
            position: absolute;
            right: 20px;
            bottom: 20px;
            background: white;
            color: var(--ad-green);
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        
        .ad-indicators {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }
        
        .ad-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
        }
        
        .ad-indicator.active {
            background: white;
        }
        
        /* 推荐房源 */
        .recommend-section {
            padding: 0 15px;
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 12px;
        }
        
        .section-title::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 20px;
            background: var(--primary);
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 2px;
        }
        
        /* 修改后的房产卡片链接样式 */
        .property-card-link {
            display: block;
            margin-bottom: 20px;
            color: inherit;
        }
        
        .property-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s ease;
        }
        
        .property-card-link:hover .property-card {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .property-image {
            height: 180px;
            background: linear-gradient(45deg, #e0e7ff, #d1fae5);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #4b5563;
            font-weight: 500;
        }
        
        .property-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: var(--danger);
            color: white;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .property-content {
            padding: 15px;
        }
        
        .property-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
        }
        
        .property-location {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #6B7280;
            margin-bottom: 10px;
        }
        
        .property-location::before {
            content: "📍";
            margin-right: 6px;
        }
        
        .property-details {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 12px;
        }
        
        .property-price {
            color: var(--danger);
            font-weight: 700;
            font-size: 18px;
        }
        
        .property-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px;
        }
        
        .property-tag {
            background: var(--light-bg);
            color: var(--text);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        /* Tab切换导航 */
        .tabs-container {
            margin-bottom: 15px;
            overflow-x: auto;
            padding: 0 15px;
            scrollbar-width: none;
        }
        
        .tabs-container::-webkit-scrollbar {
            display: none;
        }
        
        .property-tabs {
            display: flex;
            gap: 8px;
            padding-bottom: 5px;
            width: max-content;
        }
        
        .property-tab {
            padding: 8px 15px;
            border-radius: 20px;
            background: var(--light-bg);
            color: var(--text);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s ease;
        }
        
        .property-tab.active {
            background: var(--primary);
            color: white;
            font-weight: 600;
        }
        
        .property-content-section {
            display: none;
        }
        
        .property-content-section.active {
            display: block;
        }
        
        /* 优化后的底部导航菜单 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
            padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
            z-index: 1000;
            max-width: 428px;
            margin: 0 auto;
            border-radius: 20px 20px 0 0;
        }
        
        /* 修改后的底部导航项样式 */
        .tab-bar a.tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 5px 10px;
            min-height: 60px;
            border-radius: 16px;
            margin: 0 5px;
            transition: all 0.2s ease;
            position: relative;
            cursor: pointer;
            color: #495057;
        }
        
        .tab-item.active {
            background: rgba(234, 168, 42, 0.15);
            color: var(--primary);
        }
        
        .tab-item.active .tab-icon {
            color: var(--primary);
            transform: scale(1.1);
        }
        
        .tab-item.active .tab-label {
            font-weight: 600;
        }
        
        .tab-icon {
            font-size: 1.4rem;
            margin-bottom: 4px;
            transition: all 0.2s ease;
            color: #6c757d;
        }
        
        .tab-item.active .tab-icon {
            color: var(--primary);
        }
        
        .tab-label {
            font-size: 12px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        
        /* 大象品牌元素装饰 */
        .elephant-decoration {
            position: absolute;
            top: 15px;
            left: 20px;
            opacity: 0.15;
            font-size: 32px;
            transform: rotate(-15deg);
            z-index: 0;
            color: var(--primary);
        }
        
        /* 响应式调整 */
        @media (max-width: 375px) {
            .service-icon {
                width: 38px;
                height: 38px;
                font-size: 18px;
            }
            
            .tab-icon {
                font-size: 1.3rem;
            }
            
            .tab-label {
                font-size: 11px;
            }
            
            .brand-title {
                font-size: 24px;
            }
            
            .brand-subtitle {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
<header class="brand-header">
    <div class="elephant-decoration">
        <i class="fas fa-elephant"></i>
    </div>
    <div class="brand-title">吉象出海</div>
    <div class="brand-subtitle">泰国专业房地产服务平台</div>
</header>
    
    <!-- 搜索区域 -->
    <section class="search-section">
        <div class="search-box">
            <div class="select-container">
                <select id="propertyType">
                    <option>二手房</option>
                    <option>新房</option>
                    <option>土地</option>
                    <option>租公寓</option>
                    <option>厂房</option>
                </select>
                <i class="fas fa-chevron-down select-arrow"></i>
            </div>
            <input type="text" placeholder="输入房源、位置或中介" id="searchInput">
            <button class="search-button" id="searchButton">
                <i class="fas fa-search"></i>
                <span>搜索</span>
            </button>
        </div>
    </section>
    
    <!-- 服务导航 -->
    <section class="services-section">
        <div class="services-title">
            <span>常用服务</span>
            <a href="allservice.html" class="view-all">全部服务 ></a>
        </div>
        
        <div class="services-grid">
		<a href="houselist.html">
            <div class="service-item">
                <div class="service-icon">🏠</div>
                <div class="service-name">新房</div>
            </div>
			</a>
			<a href="houselist.html">
            <div class="service-item">
                <div class="service-icon">🏡</div>
                <div class="service-name">二手房</div>
            </div>
			</a>
			<a href="houselist.html">
            <div class="service-item">
                <div class="service-icon">🛏️</div>
                <div class="service-name">租房</div>
            </div>
			</a>
			
			<a href="landlist.html">
            <div class="service-item">
                <div class="service-icon">🌾</div>
                <div class="service-name">土地</div>
            </div>
			</a>
			<a href="workshoplist.html">
            <div class="service-item">
                <div class="service-icon">🏭</div>
                <div class="service-name">厂房</div>
            </div>
			</a>
			<a href="visa.html">
            <div class="service-item">
                <div class="service-icon">🛂</div>
                <div class="service-name">签证/驾照</div>
            </div>
			</a>
			<a href="exchange.html">
            <div class="service-item">
                <div class="service-icon">💱</div>
                <div class="service-name">汇率</div>
            </div>
			</a>
			<a href="news.html">
            <div class="service-item">
                <div class="service-icon">📰</div>
                <div class="service-name">头条</div>
            </div>
			</a>
			
            <div class="more-services service-item">
                <i class="fas fa-th-large"></i>
                <div class="service-name"><a href="allservice.html">查看全部服务</a></div>
            </div>
        </div>
    </section>
    
    <!-- 轮播广告位 -->
    <section class="ad-section">
        <div class="ad-slides">
            <div class="ad-slide">
                <div class="ad-badge">限时特惠</div>
                <div class="ad-title">工业用地限时特惠</div>
                <div class="ad-content">罗勇新增37宗BOI免税地块，首付仅需10%，签约即享优先选地权</div>
                <a href="landlist.html" class="ad-button">立即查看</a>
            </div>
            <div class="ad-slide">
                <div class="ad-badge">精选房源</div>
                <div class="ad-title">曼谷河景公寓</div>
                <div class="ad-content">湄南河畔豪华公寓，永久产权，首付仅30万泰铢起</div>
                <a href="houselist.html" class="ad-button">了解详情</a>
            </div>
            <div class="ad-slide">
                <div class="ad-badge">投资推荐</div>
                <div class="ad-title">普吉岛度假别墅</div>
                <div class="ad-content">年回报率8%+，包租3年，私人泳池+海景</div>
                <a href="houselist.html" class="ad-button">马上咨询</a>
            </div>
        </div>
        <div class="ad-indicators">
            <div class="ad-indicator active" data-index="0"></div>
            <div class="ad-indicator" data-index="1"></div>
            <div class="ad-indicator" data-index="2"></div>
        </div>
    </section>
    
    <!-- 推荐房源 -->
    <section class="recommend-section">
        <div class="section-title">精选推荐</div>
        
        <!-- Tab切换导航 -->
        <div class="tabs-container">
            <div class="property-tabs">
                <div class="property-tab active" data-tab="new">新房</div>
                <div class="property-tab" data-tab="second">二手房</div>
                <div class="property-tab" data-tab="rent">租房</div>
                <div class="property-tab" data-tab="land-rent">土地出租</div>
                <div class="property-tab" data-tab="land-sale">土地出售</div>
                <div class="property-tab" data-tab="factory-rent">厂房出租</div>
                <div class="property-tab" data-tab="factory-sale">厂房出售</div>
            </div>
        </div>
        
        <!-- 新房内容 -->
        <div class="property-content-section active" id="new-content">
            <a href="houselist.html" class="property-card-link">
                <div class="property-card">
                    <div class="property-image">
                        <div class="property-badge">必看好房</div>
                        <div>One9five ASoke 公寓效果图</div>
                    </div>
                    <div class="property-content">
                        <div class="property-title">
                            <span>One9five ASoke</span>
                            <span style="color: var(--secondary);">⭐金牌中介</span>
                        </div>
                        <div class="property-location">曼谷·素坤逸核心区</div>
                        <div class="property-details">
                            <div>1室1厅 | 36㎡ (0.023莱)</div>
                            <div class="property-price">145万泰铢</div>
                        </div>
                        <div class="property-tags">
                            <div class="property-tag">精装修</div>
                            <div class="property-tag">近地铁</div>
                            <div class="property-tag">可VR看房</div>
                            <div class="property-tag">永久产权</div>
                        </div>
                    </div>
                </div>
            </a>
            
               <a href="houselist.html" class="property-card-link">
                <div class="property-card">
                    <div class="property-image">
                        <div class="property-badge">必看好房</div>
                        <div>One9five ASoke 公寓效果图</div>
                    </div>
                    <div class="property-content">
                        <div class="property-title">
                            <span>One9five ASoke</span>
                            <span style="color: var(--secondary);">⭐金牌中介</span>
                        </div>
                        <div class="property-location">曼谷·素坤逸核心区</div>
                        <div class="property-details">
                            <div>1室1厅 | 36㎡ (0.023莱)</div>
                            <div class="property-price">145万泰铢</div>
                        </div>
                        <div class="property-tags">
                            <div class="property-tag">精装修</div>
                            <div class="property-tag">近地铁</div>
                            <div class="property-tag">可VR看房</div>
                            <div class="property-tag">永久产权</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 二手房内容 -->
        <div class="property-content-section" id="second-content">
            <a href="houselist.html" class="property-card-link">
                <div class="property-card">
                    <div class="property-image">
                        <div class="property-badge">精装二手房</div>
                        <div>素坤逸豪华公寓实景</div>
                    </div>
                    <div class="property-content">
                        <div class="property-title">
                            <span>素坤逸豪华公寓</span>
                            <span style="color: var(--secondary);">⭐金牌中介</span>
                        </div>
                        <div class="property-location">曼谷·素坤逸路</div>
                        <div class="property-details">
                            <div>2室2厅 | 78㎡</div>
                            <div class="property-price">420万泰铢</div>
                        </div>
                        <div class="property-tags">
                            <div class="property-tag">拎包入住</div>
                            <div class="property-tag">豪华装修</div>
                            <div class="property-tag">泳池景观</div>
                            <div class="property-tag">永久产权</div>
                        </div>
                    </div>
                </div>
            </a>
            
            <a href="houselist.html" class="property-card-link">
                <div class="property-card">
                    <div class="property-image">
                        <div class="property-badge">学区房</div>
                        <div>清迈别墅实景图</div>
                    </div>
                    <div class="property-content">
                        <div class="property-title">
                            <span>清迈国际学区别墅</span>
                            <span style="color: var(--secondary);">⭐平台验真</span>
                        </div>
                        <div class="property-location">清迈·杭东区</div>
                        <div class="property-details">
                            <div>3室2厅 | 220㎡</div>
                            <div class="property-price">890万泰铢</div>
                        </div>
                        <div class="property-tags">
                            <div class="property-tag">国际学校</div>
                            <div class="property-tag">花园别墅</div>
                            <div class="property-tag">安静社区</div>
                            <div class="property-tag">永久产权</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        
        <!-- 租房内容 -->
        <div class="property-content-section" id="rent-content">
            <a href="houselist.html" class="property-card-link">
                <div class="property-card">
                    <div class="property-image">
                        <div class="property-badge">月租特惠</div>
                        <div>曼谷市中心公寓</div>
                    </div>
                    <div class="property-content">
                        <div class="property-title">
                            <span>曼谷暹罗商圈公寓</span>
                            <span style="color: var(--secondary);">⭐金牌中介</span>
                        </div>
                        <div class="property-location">曼谷·暹罗商圈</div>
                        <div class="property-details">
                            <div>1室1厅 | 42㎡</div>
                            <div class="property-price">15,000泰铢/月</div>
                        </div>
                        <div class="property-tags">
                            <div class="property-tag">拎包入住</div>
                            <div class="property-tag">商圈核心</div>
                            <div class="property-tag">家具齐全</div>
                            <div class="property-tag">包物业管理</div>
                        </div>
                    </div>
                </div>
            </a>
            
            <a href="houselist.html" class="property-card-link">
                <div class="property-card">
                    <div class="property-image">
                        <div class="property-badge">海景别墅</div>
                        <div>芭提雅海景别墅</div>
                    </div>
                    <div class="property-content">
                        <div class="property-title">
                            <span>芭提雅无敌海景别墅</span>
                            <span style="color: var(--secondary);">⭐平台验真</span>
                        </div>
                        <div class="property-location">芭提雅·中天海滩</div>
                        <div class="property-details">
                            <div>4室3厅 | 320㎡</div>
                            <div class="property-price">65,000泰铢/月</div>
                        </div>
                        <div class="property-tags">
                            <div class="property-tag">私人泳池</div>
                            <div class="property-tag">海景露台</div>
                            <div class="property-tag">管家服务</div>
                            <div class="property-tag">豪华装修</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </section>
    
    <!-- 底部导航菜单 -->
    <div class="tab-bar">
        <a href="home.html" class="tab-item active">
            <div class="tab-icon"><i class="fas fa-home"></i></div>
            <div class="tab-label">首页</div>
        </a>
        <a href="message.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-comment-dots"></i></div>
            <div class="tab-label">消息</div>
        </a>
        <a href="postlist.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-plus-circle"></i></div>
            <div class="tab-label">发布</div>
        </a>
        <a href="entrust.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-handshake"></i></div>
            <div class="tab-label">委托</div>
        </a>
        <a href="profile.html" class="tab-item">
            <div class="tab-icon"><i class="fas fa-user"></i></div>
            <div class="tab-label">我的</div>
        </a>
    </div>
    
    <script>
        // 底部导航交互
        document.querySelectorAll('.tab-bar a.tab-item').forEach(item => {
            item.addEventListener('click', function(e) {
                if(this.classList.contains('active')) {
                    e.preventDefault();
                }
                document.querySelectorAll('.tab-bar a.tab-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 广告轮播功能
        const slides = document.querySelector('.ad-slides');
        const indicators = document.querySelectorAll('.ad-indicator');
        let currentSlide = 0;
        
        function showSlide(index) {
            slides.style.transform = `translateX(-${index * 100}%)`;
            indicators.forEach(indicator => indicator.classList.remove('active'));
            indicators[index].classList.add('active');
            currentSlide = index;
        }
        
        indicators.forEach(indicator => {
            indicator.addEventListener('click', function() {
                showSlide(parseInt(this.dataset.index));
            });
        });
        
        // 自动轮播
        setInterval(() => {
            currentSlide = (currentSlide + 1) % 3;
            showSlide(currentSlide);
        }, 4000);
        
        // 服务项悬停效果
        document.querySelectorAll('.service-item').forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
        
        // 搜索功能
        const searchButton = document.getElementById('searchButton');
        const searchInput = document.getElementById('searchInput');
        
        searchButton.addEventListener('click', function() {
            const searchTerm = searchInput.value.trim();
            const propertyType = document.getElementById('propertyType').value;
            
            if (searchTerm) {
                alert(`正在搜索${propertyType}: ${searchTerm}`);
            } else {
                searchInput.focus();
            }
        });
        
        searchInput.addEventListener('keyup', function(event) {
            if (event.key === 'Enter') {
                searchButton.click();
            }
        });
        
        // 查看全部服务按钮点击
        document.querySelector('.more-services').addEventListener('click', function() {
            alert('跳转到全部服务页面');
        });
        
        // 房源分类Tab切换功能
        const propertyTabs = document.querySelectorAll('.property-tab');
        
        propertyTabs.forEach(tab => {
            tab.addEventListener('click', function() {
                propertyTabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                document.querySelectorAll('.property-content-section').forEach(section => {
                    section.classList.remove('active');
                });
                
                const tabId = this.dataset.tab;
                document.getElementById(`${tabId}-content`).classList.add('active');
            });
        });
    </script>
</body>
</html>